<%--
Created by IntelliJ IDEA.
User: 0927
Date: 2020/9/24
Time: 19:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>admin</title>

    <!-- Bootstrap -->
    <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/footer.css">
	
	<script src="..\..\plugins\jquery\jquery.min.js"></script>
	<script src="..\..\plugins\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>
    <div class="container" style=" background-color:#f5f5f5;width: 100%;">
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid" style="background-color: white;">
                <div class="navbar-header">
                    <a class="navbar-brand" href="../index/index.jsp">精翼</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav  navbar-left">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 5px 0 0 0;">
                                <img alt="" class="img-circle" src="../../images/zly.png" width="40px" height="40px" />
                                <span style="color: #0e0101;font-size: 15px">
								<i>紫薇</i>
							</span>
                            </a>
                        </li>
                    </ul>
                    <!-- <form class="navbar-form navbar-left" role="search">
                        <button type="submit" class="btn btn-default">
						向左对齐-提交按钮
					</button>
                    </form> -->
                    <p class="navbar-text navbar-left">欢迎</p>
                    <!--向右对齐-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="../logAndRegist/login.jsp"><span class="glyphicon glyphicon-user"></span> 登录</a></li>
                        <li><a href="../mail/mailBox.jsp"><span class="glyphicon glyphicon-envelope"></span> 信箱</a></li>
                        <!-- <span class="badge">3</span> -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
							管理员中心 <b class="caret"></b>
						</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">个人资料</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">设置</a></li>
                                <li class="divider"></li>
                                <li><a href="#">安全退出</a></li>
                                <li class="divider"></li>
                                <!-- <li><a href="#">另一个分离的链接</a></li> -->
                            </ul>
                        </li>
                    </ul>
                    <!-- <form class="navbar-form navbar-right" role="search">
                        <button type="submit" class="btn btn-default">
						向右对齐-提交按钮
					</button>
                    </form> -->
                    <!-- <p class="navbar-text navbar-right">向右对齐-文本</p> -->
                </div>
            </div>
        </nav>
        <!-- 以上为导航栏 -->


        <div class="container" style="background-color: white;">
            <div class="col-md-8">
                <h2>客户管理</h2>
            </div>
            <div class="row">
                <div class="col-md-5" style="float: right;">
                    <form class="bs-example bs-example-form" role="form">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="查找客户">
                            <span class="input-group-btn">
								<button type="button" class="btn btn-primary">
									<span class="glyphicon glyphicon-search"></span>&nbsp搜索
                            </button>
                            </span>
                        </div>
                    </form>
                </div>

                <div class="col-md-7">
                    <h5 style="font-size: 16px;">所有预约客户必须通过电话验证</h5>
                </div>
            </div>
            <br>

            <!-- 增删模态框 -->
            <div class="row" style="margin-top: 10px;">
                <div class="col-md-6">
                    <button type="button" class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-refresh"></span>刷新
                      </button>
                    <button type="button" class="btn btn-danger btn-sm">
                        <span class=" glyphicon glyphicon-trash"></span>批量删除
                      </button>
                    <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModal">
                        <span class="glyphicon glyphicon-plus"></span>增加
                      </button>
                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title">
                                        增加
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <!-- 表单 -->
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">聚焦</label>
                                            <div class="col-sm-10">
                                                <input class="form-control" type="text" value="该输入框获得焦点...">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="disabledInput" class="col-sm-2 control-label">
                                                禁用
                                            </label>
                                            <div class="col-sm-10">
                                                <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
                                            </div>
                                        </div>
                                        <fieldset disabled>
                                            <div class="form-group">
                                                <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）
                                                </label>
                                                <div class="col-sm-10">
                                                    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）
                                                </label>
                                                <div class="col-sm-10">
                                                    <select id="disabledSelect" class="form-control">
                                                        <option>禁止选择</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="form-group has-success">
                                            <label class="col-sm-2 control-label" for="inputSuccess">
                                                输入成功
                                            </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputSuccess">
                                            </div>
                                        </div>
                                        <div class="form-group has-warning">
                                            <label class="col-sm-2 control-label" for="inputWarning">
                                                输入警告
                                            </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputWarning">
                                            </div>
                                        </div>
                                        <div class="form-group has-error">
                                            <label class="col-sm-2 control-label" for="inputError">
                                                输入错误
                                            </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="inputError">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                        </button>
                                            <button type="button" class="btn btn-primary">
                                        提交
                                        </button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                </div>

            </div>


            <!-- 增删按钮 -->

            <div class="row">
                <ul id="myTab" class="nav nav-tabs" style="width: 100%;">
                    <li class="active">
                        <a href="#home" data-toggle="tab">客户表</a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">车辆</a></li>
                    <li class="dropdown">
                        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">其他<b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
                        </ul>
                    </li>
                    <li style="float: right; padding: 8px 5px 0px 5px;margin: 0px 0px;">
                        <p>查询到1199名客户</p>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <table class="table table-hover table-responsive">
                            <caption>所有预约客户必须通过电话验证</caption>
                            <thead>
                                <tr>
                                    <td><input type="checkbox" id="ck_all"> </td>
                                    <th>姓名</th>
                                    <th>电话</th>
                                    <th>密码</th>
                                    <th>年龄</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox" name="ck_content"></td>
                                    <td>Tanmay</td>
                                    <td>18151139235</td>
                                    <td>560001</td>
                                    <td>22</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#myModalxg01"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content"></td>
                                    <td>Tanmay</td>
                                    <td>18151139235</td>
                                    <td>560001</td>
                                    <td>22</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#myModalxg01"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content"></td>
                                    <td>Tanmay</td>
                                    <td>18151139235</td>
                                    <td>560001</td>
                                    <td>22</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"data-toggle="modal" data-target="#myModalxg01"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content"></td>
                                    <td>Tanmay</td>
                                    <td>18151139235</td>
                                    <td>560001</td>
                                    <td>22</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"data-toggle="modal" data-target="#myModalxg01"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content"></td>
                                    <td>Tanmay</td>
                                    <td>18151139235</td>
                                    <td>560001</td>
                                    <td>22</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"data-toggle="modal" data-target="#myModalxg01"></span></a>
                                    </td>
                                </tr>

                                <tr>

                                    <td colspan="6">
                                        <div style="text-align: center;">
                                            <ul class="pagination">
                                                <!-- <ul class="pagination pager"></ul> -->
                                                <li><a href="#">&laquo;</a></li>
                                                <li class="active"><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">5</a></li>
                                                <li><a href="#">&raquo;</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ios">
                        <table class="table table-hover table-responsive">
                            <caption>所有预约客户必须通过电话验证</caption>
                            <thead>
                                <tr>
                                    <td><input type="checkbox" id="ck_all01"> </td>
                                    <th>名称</th>
                                    <th>城市</th>
                                    <th>邮编</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox" name="ck_content02"></td>
                                    <td>Tanmay</td>
                                    <td>Bangalore</td>
                                    <td>560001</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content02"></td>
                                    <td>Sachin</td>
                                    <td>Mumbai</td>
                                    <td>400003</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content02"></td>
                                    <td>Uma</td>
                                    <td>Pune</td>
                                    <td>411027</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content02"></td>
                                    <td>Uma</td>
                                    <td>Pune</td>
                                    <td>411027</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name="ck_content02"></td>
                                    <td>Uma</td>
                                    <td>Pune</td>
                                    <td>411027</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>

                                <tr>

                                    <td colspan="4">
                                        <div style="text-align: center;">
                                            <ul class="pagination">
                                                <!-- <ul class="pagination pager"></ul> -->
                                                <li><a href="#">&laquo;</a></li>
                                                <li class="active"><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">5</a></li>
                                                <li><a href="#">&raquo;</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="jmeter">
                        <p>瓜子二手车是一家提供二手车交易、服务的公司，由杨浩涌于2015年9月成立，总部位于北京。[1]</p>
                        <p>瓜子二手车前身是赶集好车，后拆分注册，2016年-2017年先后获得共计6.5亿美金融资。2017年10月，正式升级为车好多集团。</p>
                    </div>
                    <div class="tab-pane fade" id="ejb">
                        <p>二手车电商平台瓜子二手宣布A轮融资总额超2.5亿美元，数额是该领域A轮融资规模之最。瓜子二手车CEO杨浩涌宣布正式启用知名影视明星孙红雷为品牌形象代言人，同时宣布将在未来的一年继续在品牌层面投入10亿人民币，借由代言人孙红雷的品牌影响力，深度巩固瓜子二手车在中国二手车行业领导品牌的地位。
                        </p>
                    </div>
                </div>


            </div>
            <div class="row">
                <div class="col-xs-3" id="myScrollspy">
                    <ul class="nav nav-tabs nav-stacked" id="myNav">
                        <li class="active"><a href="#section-1">第一部分</a></li>
                        <li><a href="#section-2">第二部分</a></li>
                        <li><a href="#section-3">第三部分</a></li>
                        <li><a href="#section-4">第四部分</a></li>
                        <li><a href="#section-5">第五部分</a></li>
                    </ul>
                </div>
                <div class="col-xs-9">
                    <h2 id="section-1">第一部分</h2>
                    <caption>xx表</caption>

                    <div class="row">
                        <div class="row">
                            <div class="col-md-4">
                                <select class="selectpicker show-tick form-control" data-live-search="true">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
							  </select>
                            </div>
                            <div class="col-md-4">
                                <select class="selectpicker show-tick form-control" data-live-search="true">
								<option>香樟</option>
								<option>银杏</option>
								<option>雪松</option>
								<option>黑松</option>
								<option>银木</option>
								<option>桂花</option>
							  </select>
                            </div>
                            <div class="col-md-4">
                                <select class="selectpicker show-tick form-control" data-live-search="true">
							<option>香樟</option>
							<option>银杏</option>
							<option>雪松</option>
							<option>黑松</option>
							<option>银木</option>
							<option>桂花</option>
						  </select>
                            </div>
                        </div>
                        <table class="table table-hover table-responsive">

                            <thead>
                                <tr>
                                    <td><input type="checkbox" name=""></td>
                                    <th>名称</th>
                                    <th>城市</th>
                                    <th>邮编</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox" name=""></td>
                                    <td>Tanmay</td>
                                    <td>Bangalore</td>
                                    <td>560001</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" name=""></td>
                                    <td>Sachin</td>
                                    <td>Mumbai</td>
                                    <td>400003</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>Uma</td>
                                    <td>Pune</td>
                                    <td>411027</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>Uma</td>
                                    <td>Pune</td>
                                    <td>411027</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>Uma</td>
                                    <td>Pune</td>
                                    <td>411027</td>
                                    <td>
                                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                    </td>
                                </tr>

                                <tr>

                                    <!-- 分页 -->

                                    <td colspan="5">
                                        <div style="text-align: center;">
                                            <ul class="pagination">
                                                <!-- <ul class="pagination pager"></ul> -->
                                                <li><a href="#">&laquo;</a></li>
                                                <li class="active"><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">5</a></li>
                                                <li><a href="#">&raquo;</a></li>
                                            </ul>
                                        </div>
                                    </td>


                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h2 id="section-2">第二部分</h2>
                    <caption>车辆上架</caption>
                    <div class="row">
                        <form class="bs-example bs-example-form" role="form">
                            <div class="row">
                                <div class="input-group input-group-sm col-md-6" style="margin: 0 auto;">
                                    <input type="text" class="form-control" placeholder="请输入">
                                    <span class="input-group-btn">
										<button class="btn btn-default btn-primary" type="button">
                                            <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                                    </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                        <!-- 模态框 -->
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-md-6" style="margin-left: 20px;">
                                <button type="button" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-refresh"></span>刷新
                                  </button>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <span class=" glyphicon glyphicon-trash"></span>批量删除
                                  </button>
                                <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModal021">
                                    <span class="glyphicon glyphicon-plus"></span>增加
                                  </button>
                                <!-- 模态框（Modal） -->
                                <div class="modal fade" id="myModal021" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h4 class="modal-title" id="myModalLabel">
                                                    增加
                                                </h4>
                                            </div>
                                            <div class="modal-body">
                                                <!-- 表单 -->
                                                <form class="form-horizontal" role="form">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">车牌号</label>
                                                        <div class="col-sm-10">
                                                            <input class="form-control" type="text" value="苏A9V5S0">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="" class="col-sm-2 control-label">中介人</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"  placeholder="请输入中介人" name="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="col-sm-2 control-label">价格</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control" placeholder="请输入价格" name="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="col-sm-2 control-label">修改日期</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"  placeholder="" name="" disabled>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">

                                                        <label for="" class="col-sm-2 control-label">车辆当前状态</label>
                                                        <div class="col-sm-10">
                                                            <select  name="" class="form-control">
                                                                <option value="1">已上架</option>
                                                                <option value="2">已成交</option>
                                                                <option value="3">待审核</option>
                                                                <option value="4">未通过</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                    </button>
                                                        <button type="button" class="btn btn-primary">提交
                                                    </button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>
                                <!-- /.modal -->

                            </div>

                        </div>
                        <!-- 模态框             -->
                    </div>
                    <table class="table table-responsive">
                        <thead>
                            <tr>
                                <td><input type="checkbox" name=""></td>
                                <th>车牌号</th>
                                <th>中介人</th>
                                <th>价格</th>
                                <th>修改日期</th>
                                <th>状态</th>
                                <th>审核</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="active">
                                <td></td>
                                <td>0927</td>
                                <td>徐某某</td>
                                <td>6.7</td>
                                <td>2020-09-27</td>
                                <td>已上架</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-remove"></span></a>
                                </td>
                            </tr>
                            <tr class="success">
                                <td><input type="checkbox" name=""></td>
                                <td>0927</td>
                                <td>徐某某</td>
                                <td>6.7</td>
                                <td>2020-09-27</td>
                                <td>已成交</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                </td>
                            </tr>
                            <tr class="warning">
                                <td></td>
                                <td>0927</td>
                                <td>徐某某</td>
                                <td>6.7</td>
                                <td>2020-09-27</td>
                                <td>待审核</td>
                                <td>
                                    <a class="text-success" href="#"><span class="glyphicon glyphicon glyphicon-ok"></span></a>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-remove"></span></a>
                                </td>
                            </tr>
                            <tr class="danger">
                                <td><input type="checkbox" name=""></td>
                                <td>0927</td>
                                <td>徐某某</td>
                                <td>6.7</td>
                                <td>2020-09-27</td>
                                <td>未通过</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>

                                <!-- 分页 -->

                                <td colspan="5">
                                    <div style="text-align: center;">
                                        <ul class="pagination">
                                            <!-- <ul class="pagination pager"></ul> -->
                                            <li><a href="#">&laquo;</a></li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">&raquo;</a></li>
                                        </ul>
                                    </div>
                                </td>


                            </tr>
                        </tbody>
                    </table>

                    <hr>
                    <h2 id="section-3">第三部分</h2>
                    <caption>预约处理<span></span></caption>

                    <div class="row">
                        <div class="input-group input-group-sm col-md-6" style="margin: 0 auto;">
                            <!-- <div class="input-group input-group-sm"> -->
                            <input type="text" class="form-control" placeholder="请输入">
                            <span class="input-group-btn">
                                    <button class="btn btn-default btn-primary" type="button">
                                        <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                            </button>
                            </span>
                        </div>
                        <!-- <input type="text" class="form-control input-group-sm"><span class="input-group-addon btn btn-primary">搜索</span> -->
                        <!-- 模态框 -->
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-md-6" style="margin-left: 20px;">
                                <button type="button" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-refresh"></span>刷新
                                  </button>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <span class=" glyphicon glyphicon-trash"></span>批量删除
                                  </button>
                                <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModal02">
                                    <span class="glyphicon glyphicon-plus"></span>增加
                                  </button>
                                <!-- 模态框（Modal） -->
                                <div class="modal fade" id="myModal02" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h4 class="modal-title" >
                                                    增加
                                                </h4>
                                            </div>
                                            <div class="modal-body">
                                                <!-- 表单 -->
                                                <form class="form-horizontal" role="form">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">客户名</label>
                                                        <div class="col-sm-10">
                                                            <input class="form-control" id="focusedInput" type="text" value="请输入客户名">
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="" class="col-sm-2 control-label">联系电话</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"  placeholder="请输入联系电话" name="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="col-sm-2 control-label">中介人</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"  placeholder="请输入中介人" name="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="col-sm-2 control-label">预约时间</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control"  placeholder="请输入预约时间" name="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">

                                                        <label for="" class="col-sm-2 control-label">当前状态</label>
                                                        <div class="col-sm-10">
                                                            <select id="" name="" class="form-control">
                                                                <option value="1">已确认</option>
                                                                <option value="2">成功看车</option>
                                                                <option value="3">待处理</option>
                                                                <option value="4">已失效</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                    </button>
                                                        <button type="button" class="btn btn-primary">提交
                                                    </button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>
                                <!-- /.modal -->

                            </div>

                        </div>
                        <!-- 模态框             -->
                    </div>
                    <table class="table table-responsive">

                        <thead>
                            <tr>
                                <td><input type="checkbox" name=""></td>
                                <th>客户名</th>
                                <th>联系电话</th>
                                <th>中介人</th>
                                <th>预约日期</th>
                                <th>状态</th>
                                <th>处理</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="active">
                                <td></td>
                                <td>唐某某</td>
                                <td>13164645353</td>
                                <td>许某某</td>
                                <td>2020-09-27</td>
                                <td>已确认</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-remove"></span></a>
                                </td>
                            </tr>
                            <tr class="success">
                                <td><input type="checkbox" name=""></td>
                                <td>唐某某</td>
                                <td>13164645353</td>
                                <td>许某某</td>
                                <td>2020-09-27</td>
                                <td>成功看车</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                </td>
                            </tr>
                            <tr class="warning">
                                <td></td>
                                <td>唐某某</td>
                                <td>13164645353</td>
                                <td>许某某</td>
                                <td>2020-09-27</td>
                                <td>待处理</td>
                                <td>
                                    <a class="text-success" href="#"><span class="glyphicon glyphicon glyphicon-ok"></span></a>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-remove"></span></a>
                                </td>
                            </tr>
                            <tr class="danger">
                                <td><input type="checkbox" name=""></td>
                                <td>唐某某</td>
                                <td>13164645353</td>
                                <td>许某某</td>
                                <td>2020-09-27</td>
                                <td>已失效</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                </td>
                            </tr>
                            <tr>

                                <!-- 分页 -->

                                <td colspan="5">
                                    <div style="text-align: center;">
                                        <ul class="pagination">
                                            <!-- <ul class="pagination pager"></ul> -->
                                            <li><a href="#">&laquo;</a></li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">&raquo;</a></li>
                                        </ul>
                                    </div>
                                </td>


                            </tr>
                        </tbody>
                    </table>
                    <hr>
                    <h2 id="section-4">第四部分</h2>
                    <div id="main2" style="width: 600px;height:400px;"></div>
                    <hr>
                    <h2 id="section-5">第五部分</h2>
                    <div id="main" style="width: 600px;height:400px;"></div>
                </div>

            </div>



        </div>
    </div>


    </div>

    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModalxg01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" >
                        修改
                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 表单 -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="focusedInput" type="text" value="请输入姓名">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control"  placeholder="请输入电话" name="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入密码" name="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="请输入年龄" name="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">修改日期</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control"  placeholder="" name="" disabled>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary">提交
                            </button>
                        </div>
                    </form>
                </div>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
<div id="footer">

</div>
<!-- 
    <script src="plugins\jquery\jquery.min.js"></script>
    <script src="plugins\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
    <style>
        /* Custom Styles */
        
        ul.nav-tabs {
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        
        ul.nav-tabs li {
            margin: 0;
            border-top: 1px solid #ddd;
        }
        
        ul.nav-tabs li:first-child {
            border-top: none;
        }
        
        ul.nav-tabs li a {
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        
        ul.nav-tabs li.active a,
        ul.nav-tabs li.active a:hover {
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        
        ul.nav-tabs li:first-child a {
            border-radius: 4px 4px 0 0;
        }
        
        ul.nav-tabs li:last-child a {
            border-radius: 0 0 4px 4px;
        }
        
        ul.nav-tabs.affix {
            top: 30px;
            /* Set the top position of pinned element */
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#myNav").affix({
                offset: {
                    top: 515
                }
            });
        });


        /* echarts图 */
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '车辆成交数据'
            },
            tooltip: {},
            legend: {
                data: ['成交额']
            },
            xAxis: {
                data: ["奔驰", "别克", "大众", "日产", "宝马", "丰田"]
            },
            yAxis: {},
            series: [{
                name: '成交额',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option = {
            series: [{
                name: '用户年龄群体',
                type: 'pie',
                radius: '55%',
                data: [{
                    value: 235,
                    name: '其他'
                }, {
                    value: 274,
                    name: '40-50'
                }, {
                    value: 310,
                    name: '20-25'
                }, {
                    value: 335,
                    name: '35-40'
                }, {
                    value: 400,
                    name: '25-35'
                }],
                roseType: 'angle',
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 全选
        $(function () {
            //1.获取select对象
            let ck = document.getElementById("ck_all");
            // let ck1 = document.getElementById("ck_all02");
            // let ck2 = document.getElementById("ck_all03");
            // let ck3 = document.getElementById("ck_all04");
            // let ck4 = document.getElementById("ck_all05");
            //3.获取下面所有的ck
            let cks = document.getElementsByName("ck_content");
            // let cks1 = document.getElementsByName("ck_content02");
            // let cks2 = document.getElementsByName("ck_content03");
            // let cks3 = document.getElementsByName("ck_content04");
            // let cks4 = document.getElementsByName("ck_content05");


            //2.给checkbox添加单击事件
            ck.onclick=function () {
                if (ck.checked){
                    for (let i=0;i<cks.length;i++){
                        cks[i].checked=true;
                    }
                }else {
                    for (let i=0;i<cks.length;i++){
                        cks[i].checked=false;
                    }
                }
            }
        });


        // ck1.onclick=function () {
        //     if (ck1.checked){
        //         for (let i=0;i<cks1.length;i++){
        //             cks1[i].checked=true;
        //         }
        //     }else {
        //         for (let i=0;i<cks1.length;i++){
        //             cks1[i].checked=false;
        //         }
        //     }
        // }

        // );
        $(function(){
            $("#footer").load("../common/footer.jsp");
        })

    </script>
</body>

</html>